<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <table border="1">
    <caption>商品列表</caption>
    <tr>
        <th>商品名</th>
        <th>价格</th>
        <th>库存</th>
    </tr>
    </table>
</head>
<body>
<script>
    //
    function Person() {}
    let p1 = new Person();
    p1.name = "元歌"
    p1.age = 50;
    p1.run = function () {
        console.log(this.name+":"+this.age);
    }
    p1.run();
    //定义一个自带属性和方法的对象
    function Car() {
        this.name = "宾利"
        this.price= 500
        this.run = function (){
            console.log(this.name+":"+this.price)

        }
    }
    let c1 = new Car();
    c1.run();

    //直接实例化对象的方式
    let p2 = {};
    p2.name = "貂蝉"
    p2.age = 66
    p2.run = function () {
        console.log(this.name+":"+this.age)
    }
    p2.run()
    //直接实例化带属性和方法的对象
    let p3 = {
        name:"吕布",
        age:66,
        run:function () {
            console.log(this.name+":"+this.age)
        }
    }
    p3.run()


    //将商品信息封装到一个对象中，在数组里面装多个表示商品信息的对象
    let arr = [{title : "小米手机", price:50000,num :5000},
             {title : "华为手机",  price:50000,num:5000},
             {title : "da米手机",  price:50300,num:5000},
             {title : "菠萝手机",  price:50000,num:5000}]
    let table = document.querySelector("table");
    for (let item of arr){
        let tr = document.createElement("tr")
        let titleTd = document.createElement("td")
        let priceTd = document.createElement("td")
        let numTd = document.createElement("td")

        titleTd.innerText=item.title;
        priceTd.innerText=item.price;
        numTd.innerText= item.num;
        tr.append(titleTd,priceTd,numTd);

        table.append(tr);
    }


</script>
</body>
</html>